<template>
  <div id="app">
    <input type="button" value="浪起来" @click="run" />
    <input type="button" value="停止" @click="stop" />

    <h3>{{ msg }}</h3>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "我拿Buff,谢谢~",
      flag: true,
      timer: null,
    };
  },
  methods: {
    run() {
      if (!this.flag) return;
      this.flag = false;
      this.timer = setInterval(() => {
        const header = this.msg.slice(0, 1);
        const body = this.msg.slice(1);
        this.msg = body + header;
      }, 300);
    },

    stop() {
      clearTimeout(this.timer);
      this.flag = true;
    },
  },
};
</script>